import React, { useRef } from 'react';
import { useFrame } from '@react-three/fiber';
import { Text, Box, Cylinder, Sphere, Cone } from '@react-three/drei';
import * as THREE from 'three';

interface DetailedCoffeeShopProps {
  position: [number, number, number];
}

export const DetailedCoffeeShop: React.FC<DetailedCoffeeShopProps> = ({ position }) => {
  const shopRef = useRef<THREE.Group>(null);

  useFrame((state) => {
    if (shopRef.current) {
      // Subtle floating animation
      shopRef.current.position.y = position[1] + Math.sin(state.clock.elapsedTime * 0.3) * 0.05;
    }
  });

  return (
    <group ref={shopRef} position={position}>
      {/* Main Building Structure */}
      <Box
        position={[0, 2.5, 0]}
        args={[10, 6, 5]}
        castShadow
        receiveShadow
      >
        <meshStandardMaterial 
          color="#D2B48C" 
          roughness={0.8}
          metalness={0.1}
        />
      </Box>

      {/* Brick Texture Details */}
      {Array.from({ length: 20 }, (_, i) => (
        <Box
          key={`brick-${i}`}
          position={[
            -4.8 + (i % 10) * 0.96,
            1.5 + Math.floor(i / 10) * 0.3,
            2.55
          ]}
          args={[0.9, 0.25, 0.05]}
          castShadow
        >
          <meshStandardMaterial color="#CD853F" roughness={0.9} />
        </Box>
      ))}

      {/* Detailed Roof with Tiles */}
      <Box
        position={[0, 5.8, 0]}
        args={[11, 0.3, 6]}
        castShadow
      >
        <meshStandardMaterial color="#8B4513" roughness={0.7} />
      </Box>

      {/* Roof Tiles Pattern */}
      {Array.from({ length: 30 }, (_, i) => (
        <Cylinder
          key={`tile-${i}`}
          position={[
            -5 + (i % 10) * 1,
            6.0 + (Math.floor(i / 10) * 0.1),
            -2.5 + Math.floor(i / 10) * 1.5
          ]}
          args={[0.4, 0.45, 0.08, 8]}
          rotation={[Math.PI / 2, 0, 0]}
          castShadow
        >
          <meshStandardMaterial color="#A0522D" roughness={0.8} />
        </Cylinder>
      ))}

      {/* Ornate Chimney */}
      <group position={[3.5, 6.5, 1.5]}>
        <Box args={[0.8, 2, 0.8]} castShadow>
          <meshStandardMaterial color="#696969" />
        </Box>
        <Box position={[0, 1.2, 0]} args={[1, 0.3, 1]} castShadow>
          <meshStandardMaterial color="#708090" />
        </Box>
        {/* Chimney smoke */}
        {Array.from({ length: 5 }, (_, i) => (
          <Sphere
            key={i}
            position={[
              (Math.random() - 0.5) * 0.3,
              1.5 + i * 0.4,
              (Math.random() - 0.5) * 0.3
            ]}
            args={[0.1 + Math.random() * 0.1]}
          >
            <meshLambertMaterial 
              color="#F5F5F5" 
              transparent 
              opacity={0.6 - i * 0.1}
            />
          </Sphere>
        ))}
      </group>

      {/* Elegant Front Entrance */}
      <group position={[0, 0, 2.6]}>
        {/* Double Doors */}
        <Box position={[-0.5, 1, 0]} args={[0.8, 2.5, 0.1]} castShadow>
          <meshStandardMaterial color="#654321" roughness={0.6} />
        </Box>
        <Box position={[0.5, 1, 0]} args={[0.8, 2.5, 0.1]} castShadow>
          <meshStandardMaterial color="#654321" roughness={0.6} />
        </Box>

        {/* Door Handles */}
        <Sphere position={[-0.2, 1, 0.1]} args={[0.04]}>
          <meshStandardMaterial color="#FFD700" metalness={0.9} roughness={0.1} />
        </Sphere>
        <Sphere position={[0.2, 1, 0.1]} args={[0.04]}>
          <meshStandardMaterial color="#FFD700" metalness={0.9} roughness={0.1} />
        </Sphere>

        {/* Door Windows */}
        <Box position={[-0.5, 1.5, 0.05]} args={[0.3, 0.4, 0.01]}>
          <meshStandardMaterial 
            color="#87CEEB" 
            transparent 
            opacity={0.7}
            roughness={0.0}
            metalness={0.1}
          />
        </Box>
        <Box position={[0.5, 1.5, 0.05]} args={[0.3, 0.4, 0.01]}>
          <meshStandardMaterial 
            color="#87CEEB" 
            transparent 
            opacity={0.7}
            roughness={0.0}
            metalness={0.1}
          />
        </Box>

        {/* Entrance Steps */}
        {Array.from({ length: 3 }, (_, i) => (
          <Box
            key={i}
            position={[0, -0.8 + i * 0.15, 0.5 - i * 0.2]}
            args={[2.5, 0.1, 0.4]}
            receiveShadow
          >
            <meshStandardMaterial color="#708090" />
          </Box>
        ))}
      </group>

      {/* Large Picture Windows */}
      {[
        { pos: [-3, 2.5, 2.55], size: [2, 2.5, 0.05] },
        { pos: [3, 2.5, 2.55], size: [2, 2.5, 0.05] }
      ].map((window, index) => (
        <group key={`window-${index}`}>
          {/* Window Glass */}
          <Box position={window.pos} args={window.size}>
            <meshStandardMaterial
              color="#87CEEB"
              transparent
              opacity={0.3}
              roughness={0.0}
              metalness={0.9}
            />
          </Box>
          {/* Window Frame */}
          <Box position={[window.pos[0], window.pos[1], window.pos[2] + 0.03]} args={[window.size[0] + 0.1, window.size[1] + 0.1, 0.05]}>
            <meshStandardMaterial color="#654321" />
          </Box>
          {/* Window Cross Dividers */}
          <Box position={[window.pos[0], window.pos[1], window.pos[2] + 0.01]} args={[0.05, window.size[1], 0.02]}>
            <meshStandardMaterial color="#654321" />
          </Box>
          <Box position={[window.pos[0], window.pos[1], window.pos[2] + 0.01]} args={[window.size[0], 0.05, 0.02]}>
            <meshStandardMaterial color="#654321" />
          </Box>
          {/* Window Flower Box */}
          <Box position={[window.pos[0], window.pos[1] - 1.4, window.pos[2] + 0.1]} args={[window.size[0], 0.2, 0.3]} castShadow>
            <meshStandardMaterial color="#8B4513" />
          </Box>
          {/* Flowers in Box */}
          {Array.from({ length: 4 }, (_, i) => (
            <Sphere
              key={i}
              position={[
                window.pos[0] - window.size[0]/2 + 0.3 + i * 0.4,
                window.pos[1] - 1.2,
                window.pos[2] + 0.15
              ]}
              args={[0.06]}
              castShadow
            >
              <meshStandardMaterial 
                color={['#FF69B4', '#FFB6C1', '#FF1493', '#FFC0CB'][i]} 
                emissive={['#FF69B4', '#FFB6C1', '#FF1493', '#FFC0CB'][i]}
                emissiveIntensity={0.2}
              />
            </Sphere>
          ))}
        </group>
      ))}

      {/* Decorative Awning */}
      <group position={[0, 3.5, 3.2]}>
        <Box args={[8, 0.1, 2]} castShadow>
          <meshStandardMaterial color="#FF6347" />
        </Box>
        {/* Awning Stripes */}
        {Array.from({ length: 8 }, (_, i) => (
          <Box
            key={i}
            position={[-3.5 + i * 1, -0.05, 0]}
            args={[0.8, 0.02, 2]}
          >
            <meshStandardMaterial color={i % 2 === 0 ? "#FFFFFF" : "#FF6347"} />
          </Box>
        ))}
        {/* Awning Support Rods */}
        {[-3, 0, 3].map((x, i) => (
          <Cylinder
            key={i}
            position={[x, -1, 1]}
            args={[0.03, 0.03, 2]}
          >
            <meshStandardMaterial color="#2F4F4F" metalness={0.8} />
          </Cylinder>
        ))}
      </group>

      {/* Shop Sign */}
      <group position={[0, 4.8, 2.8]}>
        <Box args={[5, 1.2, 0.2]} castShadow>
          <meshStandardMaterial color="#FFF8DC" />
        </Box>
        {/* Ornate Border */}
        <Box position={[0, 0, 0.05]} args={[5.2, 1.4, 0.1]} castShadow>
          <meshStandardMaterial color="#DAA520" metalness={0.7} roughness={0.3} />
        </Box>
        <Text
          position={[0, 0.2, 0.15]}
          fontSize={0.4}
          color="#8B4513"
          anchorX="center"
          anchorY="middle"
          castShadow
        >
          ☕ 浪漫咖啡厅 ☕
        </Text>
        <Text
          position={[0, -0.3, 0.15]}
          fontSize={0.2}
          color="#654321"
          anchorX="center"
          anchorY="middle"
        >
          Premium Coffee & Romance
        </Text>
      </group>

      {/* Interior Lighting Visible Through Windows */}
      {[
        [-3, 2.5, 2.5],
        [3, 2.5, 2.5]
      ].map((pos, i) => (
        <pointLight
          key={`interior-light-${i}`}
          position={pos}
          intensity={0.5}
          color="#FFD700"
          distance={4}
        />
      ))}

      {/* Outdoor Menu Board */}
      <group position={[-4.5, 0.8, 1]}>
        <Box args={[0.1, 1.5, 1]} castShadow>
          <meshStandardMaterial color="#2F4F4F" />
        </Box>
        <Box position={[0.05, 0, 0]} args={[0.02, 1.3, 0.8]} castShadow>
          <meshStandardMaterial color="#000000" />
        </Box>
        <Text
          position={[0.07, 0.4, 0]}
          fontSize={0.08}
          color="#FFFFFF"
          anchorX="left"
          anchorY="middle"
        >
          今日特色{'\n'}浪漫拿铁 ¥35{'\n'}情侣套餐 ¥88{'\n'}甜蜜提拉米苏 ¥28
        </Text>
      </group>

    </group>
  );
};